<script lang="ts" setup>
import { DANGER_SOURCE_SOURCE_OPTIONS } from "@/config/enum-options";
import { injectState } from "../state";

defineOptions({ name: "Filters" });

const {
  filter,
  page: { isLoading },
} = injectState()!;

const initial = { ...toRaw(filter.value) };
const data = ref({ ...initial });

const search = () => {
  filter.value = { ...toRaw(data.value) };
};

const reset = () => {
  data.value = { ...initial };
};
</script>

<template>
  <el-form inline :model="data" :disabled="isLoading">
    <el-form-item label="重大危险源">
      <el-select-v2
        :options="[...DANGER_SOURCE_SOURCE_OPTIONS]"
        v-model="data!.source"
        w="240px!"
        clearable
      />
    </el-form-item>

    <el-form-item>
      <el-divider direction="vertical" h="32px!" m="r-22px!" />
      <el-button type="primary" :loading="isLoading" @click="search">
        <template #icon>
          <el-icon class="i-custom:search" />
        </template>
        查询
      </el-button>
      <el-button @click="reset">
        <template #icon>
          <el-icon class="i-custom:reset" />
        </template>
        重置
      </el-button>
    </el-form-item>
  </el-form>
</template>
